<script setup>
import {onMounted, reactive, ref} from "vue";
import {test} from "./api/EntityApi.js";
import TestPrams from "./TestPrams.vue";

let props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  form: {
    type: Object,
    default: {}
  },
});

const basePath = import.meta.env.VITE_BACKEND_BASE_URL;
// 定义更新函数
const emit = defineEmits(['update:dialogVisible', 'refresh']);

const tableData = ref({});
let form = reactive(props.form);
let header = reactive({});
let param = reactive({});
let body = reactive({});

const handleTest = () => {
  if (form.reqHeaderList != null) {
    form.reqHeaderList.forEach(item => {
      header[item.name] = item.value;
    });
  }
  if (form.reqParamList != null) {
    form.reqParamList.forEach(item => {
      param[item.name] = item.value;
    });
  }
  if (form.reqBodyList != null) {
    form.reqBodyList.forEach(item => {
      body[item.name] = item.value;
    });
  }
  let method = form.reqType;
  let url = basePath + form.reqUrl;

  test(method, url, header, param, body).then((data) => {
    if (data) {
      tableData.value = data;
    }
  });
};

const cancel = () => {
  // 重置表单数据
  form.reqHeaderList = [];
  form.reqParamList = [];
  form.reqBodyList = [];
  tableData.value = [];
  emit('update:dialogVisible', false);
  emit('refresh');
};

onMounted(() => {
});
</script>

<template>
  <!-- 弹窗-修改 -->
  <el-dialog v-model="props.dialogVisible" title="API测试" width="60%" @close="cancel" custom-class="custom-dialog">
    <div class="dialog-header">
      <div class="header-content">
        <div>{{ form.namespace }} | {{ form.name }}（{{ form.description }}）</div>
        <div>{{ form.reqType }} | {{ basePath }}{{ form.reqUrl }}</div>
      </div>
    </div>
    <el-tabs type="card">
      <el-tab-pane label="Header">
        <TestPrams v-model:form="form.reqHeaderList"></TestPrams>
      </el-tab-pane>
      <el-tab-pane label="Body">
        <TestPrams v-model:form="form.reqBodyList"></TestPrams>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="handleTest">发送</el-button>
      </span>
    </template>

    <!-- 响应结果 -->
    <el-card class="response-card" v-if="tableData">
      <template #header>
        <div class="card-header">
          <span>响应结果</span>
        </div>
      </template>
      <pre class="json-pre">{{ JSON.stringify(tableData, null, 2) }}</pre>
    </el-card>
  </el-dialog>


</template>

<style scoped>
.dialog-header {
  display: flex;
  align-items: flex-start; /* 对齐方式根据需要调整 */
}

.header-content {
  text-align: left;
  margin: 0;
  padding: 0;
}

.header-content > div {
  margin: 0;
  padding: 0;
}

.dialog-header {
  margin-bottom: 20px;
  font-size: 16px;
  color: #333;
}

.el-tabs {
  margin-bottom: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.response-card {
  margin-top: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #333;
}

.json-pre {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  text-align: left; /* 确保文本靠左对齐 */
  font-family: 'Courier New', Courier, monospace;
  white-space: pre-wrap; /* 保留空白符并自动换行 */
}
</style>
